<template>
  <div>
    <el-collapse-item :title="$t('基础配置')" name="1">
      <el-form-item :label="$t('标题')">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
      <el-form-item :label="$t('跳转功能')">
        <l-tree-select :options="appTree" v-model="config.moduleId">
        </l-tree-select>
      </el-form-item>
      <div class="reg-item" :key="item.id" v-for="(item, index) in config.list">
        <el-form-item :label="$t('名称')" style="margin-bottom: 8px">
          <el-input v-model="item.name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('数据源')" style="margin-bottom: 8px">
          <l-select
            v-model="item.dataCode"
            placeholder="请选择数据源"
            size="mini"
            :options="lr_dataSource"
            labelKey="f_Name"
            valueKey="f_Code"
            filterable
            @change="handleDataSourceChange(item)"
          >
          </l-select>
        </el-form-item>
        <el-form-item :label="$t('显示值')" style="margin-bottom: 8px">
          <l-select
            v-model="item.dataValueKey"
            placeholder="请选择值"
            size="mini"
            :options="myColNameList(item.dataCode)"
            filterable
          >
          </l-select>
        </el-form-item>

        <el-form-item :label="$t('跳转功能')" style="margin-bottom: 0">
          <l-tree-select :options="appTree" v-model="item.moduleId">
          </l-tree-select>
        </el-form-item>
        <el-button
          :title="$t('删除')"
          v-if="config.list.length > 1"
          @click="handleRemoveCol(index)"
          class="reg-item-delete"
          circle
          plain
          size="mini"
          type="danger"
        >
          <i class="el-icon-close"></i>
        </el-button>
      </div>

      <div
        style="margin-bottom: 10px; margin-top: 10px"
        v-if="config.list.length < 4"
      >
        <el-button type="primary" size="mini" @click="handleAddCol"
          >{{ $t('添加') }}</el-button
        >
      </div>
    </el-collapse-item>
  </div>
</template>
<script>
export default {
  inject: ["appDesign"],
  props: ["data"],
  data() {
    return {};
  },
  computed: {
    config() {
      return this.data;
    },
    appTree() {
      return this.appDesign.appTree || [];
    },
  },
  methods: {
    myColNameList(dataCode) {
      if (this.lr_dataSourceCol && dataCode) {
        const colNameList = this.lr_dataSourceCol[dataCode] || [];
        return colNameList.map((t) => {
          return { value: t, label: t };
        });
      } else {
        return [];
      }
    },
    handleDataSourceChange(item) {
      const code = item.dataCode;
      if (!this.$validatenull(code)) {
        this.lr_loadDataSourceData(code);
        this.lr_loadDataSourceColNames(code);
      }

      item.dataValueKey = "";
    },
    handleAddCol() {
      const len = this.config.list.length;
      if (len >= 4) {
        this.$message({
          type: "warning",
          message: this.$t("最多添加4项"),
        });
      } else {
        this.config.list.push({
          id: this.$uuid(),
          moduleId: "",
          name: this.$t("数据项")+`${len}`,
          dataCode: "",
          dataValueKey: "",
        });
      }
    },
    handleRemoveCol(index) {
      if (this.config.list.length == 1) {
        this.$message({
          type: "warning",
          message: this.$t("必须保留一项"),
        });
      } else {
        this.config.list.splice(index, 1);
      }
    },
  },
};
</script>
